<template>
  <div class="p-4 bg-white rounded-lg shadow">
    <div class="grid grid-cols-4 gap-4 mb-4">
      <div class="flex items-center">
        <label for="username" class="mb-1 text-sm font-medium w-1/3 text-right pr-2">用户名</label>
        <el-input v-model="form.username" id="username" placeholder="请输入用户名" class="w-2/3" />
      </div>
      <div class="flex items-center">
        <label for="realname" class="mb-1 text-sm font-medium w-1/3 text-right pr-2">真实姓名</label>
        <el-input v-model="form.realname" id="realname" placeholder="请输入真实姓名" class="w-2/3" />
      </div>
      <div class="flex items-center">
        <label for="phone" class="mb-1 text-sm font-medium w-1/3 text-right pr-2">联系电话</label>
        <el-input v-model="form.phone" id="phone" placeholder="请输入联系电话" class="w-2/3" />
      </div>
      <div class="flex items-center">
        <label for="email" class="mb-1 text-sm font-medium w-1/3 text-right pr-2">邮箱地址</label>
        <el-input v-model="form.email" id="email" placeholder="请输入邮箱地址" class="w-2/3" />
      </div>
      <div class="flex items-center">
        <label for="qq" class="mb-1 text-sm font-medium w-1/3 text-right pr-2">QQ号码</label>
        <el-input v-model="form.qq" id="qq" placeholder="请输入QQ号码" class="w-2/3" />
      </div>
      <div class="flex items-center">
        <label for="idCard" class="mb-1 text-sm font-medium w-1/3 text-right pr-2">身份证号</label>
        <el-input v-model="form.idCard" id="idCard" placeholder="请输入身份证号" class="w-2/3" />
      </div>
      <div class="flex items-center">
        <label for="status" class="mb-1 text-sm font-medium w-1/3 text-right pr-2">状态</label>
        <el-select v-model="form.status" id="status" placeholder="请选择状态" class="w-2/3">
          <el-option label="正常" value="normal" />
          <el-option label="禁用" value="disabled" />
        </el-select>
      </div>
      <div class="flex items-center">
        <label for="role" class="mb-1 text-sm font-medium w-1/3 text-right pr-2">角色</label>
        <el-select v-model="form.role" id="role" placeholder="请选择角色" class="w-2/3">
          <el-option label="管理员" value="admin" />
          <el-option label="用户" value="user" />
        </el-select>
      </div>
    </div>
    <div class="flex justify-between">
      <el-button type="primary" @click="search">查询</el-button>
      <el-button type="default" @click="reset">重置</el-button>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'QueryForm',
  data() {
    return {
      form: {
        username: '',
        realname: '',
        phone: '',
        email: '',
        qq: '',
        idCard: '',
        status: '',
        role: '',
      },
    };
  },
  methods: {
    async search() {
      try {
        const response = await axios.post('/users/search', this.form);
        console.log('查询结果:', response.data);
        // 处理查询结果
      } catch (error) {
        console.error('查询失败:', error);
      }
    },
    reset() {
      this.form = {
        username: '',
        realname: '',
        phone: '',
        email: '',
        qq: '',
        idCard: '',
        status: '',
        role: '',
      };
    },
  },
};
</script>

<style scoped>
/* 可根据需要自定义样式 */
</style>